/* 公共头部部分 */
.com-header {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 20px;
    height: 120px;
}

/* 导航栏 */
.com-header_nav {
    display: inline-block;
    position: absolute;
    left: 0px;
    /* top: 30px; */
    width: 120px;
    height: 120px;
}

.com-header_navlogo {
    display: inline-block;
    width: 29px;
    height: 51px;
    margin-top: 35px;
    transform: scale(1);
    background-image: url(../images/header/navigation.png);
    /* animation: scalesmall 500ms 0s linear paused; */
}


/* logo部分 */
.com-header_logoout {
    display: inline-block;
    position: absolute;
    left: 675px;
    top: 0px;
    width: 120px;
    border-radius: 50%;
    background-color: #fff;
    z-index: 999;
}

.com-header_logooutbig {
    animation: comheaderlogo_big 500ms 0ms linear forwards paused;
}

.com-header_logooutsmall {
    animation: comheaderlogo_small 500ms 0ms linear forwards paused;
}

.com-header_logo {
    width: 120px;
    height: 120px;
    overflow: hidden;
}

@keyframes comheaderlogo_big {
    0% {
        transform: scale(1);
    }

    100% {
        overflow: hidden;
        transform: scale(25);
    }
}

@keyframes comheaderlogo_small {
    0% {
        transform: scale(25);
    }

    100% {
        overflow: hidden;
        transform: scale(1);
    }
}

.com-header_logoin {
    position: relative;
    top: 0px;
    /* z-index: -1; */
}

.com-header_logoin img,
.com-header_share img,
.com-header_share li {
    display: inline;
}

/* 分享部分 */
.com-header_share {
    display: inline-block;
    position: absolute;
    right: -63px;
    top: 53px;
}

/* .com-header_share>ul {
    margin-top: 40px;
} */

.com-header_share>ul li {
    margin-left: 15px;
}



/* 导航栏部分 */
.com-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #000;
    /* opacity: 0.9; */
    display: none;
}

.com-nav_appear {
    animation: comnavappear 500ms linear forwards paused;
}

.com-nav_disappear {
    animation: comnavdis 500ms linear forwards paused;
}

@keyframes comnavappear {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.9;
    }
}

@keyframes comnavdis {
    0% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
    }
}

.com-nav_logo {
    position: fixed;
    top: 55px;
    left: 290px;
    width: 120px;
    height: 120px;
}

.com-nav_navlogo {
    display: inline-block;
    width: 29px;
    height: 51px;
    background-image: url(../images/header/navigation.png);
    transform: scale(0.5);
}

.com-nav_navlogosmall {
    animation: scalesmall 500ms 0s linear forwards paused;

}

.com-nav_navlogobig {
    animation: scalebig 500ms 0s linear forwards paused;
}

@keyframes scalesmall {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.5);
    }
}

@keyframes scalebig {
    0% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}

.com-nav_nav {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 100px auto;
    width: 500px;
    height: 800px;

}

.com-nav_navsmall {
    animation: com-navulsmall 500ms 0s linear forwards paused;
}

.com-nav_navbig {
    animation: com-navulbig 500ms 0s linear forwards paused;
}

@keyframes com-navulsmall {
    0% {
        transform: scale(1.25);
    }

    100% {

        transform: scale(1);

    }
}

@keyframes com-navulbig {
    0% {

        transform: scale(1);
    }

    100% {

        transform: scale(1.25);

    }
}

.com-nav>ul li {
    display: inline-block;
    width: 150px;
    height: 150px;
}

.com-nav>ul li>a {
    position: absolute;
    width: 148px;
    height: 148px;
    border: 1px solid #fff;
    overflow: hidden;
}

.com-nav_icon {
    position: relative;
    left: 0;
    width: 150px;
    height: 150px;

}

@keyframes comnav_iconup {
    0% {
        top: 0;
    }

    100% {
        top: 150px
    }
}

.com-nav_icon img {
    margin: 50px;
}

.com-nav_icon span {
    position: absolute;
    display: inline-block;
    width: 150px;
    height: 149px;
    text-align: center;
    line-height: 135px;
}

.com-nav_icon span::after {
    content: '';
    position: relative;
    top: 30px;
    left: -25px;
    display: inline-block;
    width: 11px;
    height: 14px;
    background-image: url(../images/header/nav/Vector\ 5.png);
}

/* 页脚样式 */
.com-footer {
    position: relative;
    height: 230px;
}

.com-footer ul {
    position: absolute;
    top: 90px;
    right: 0;
}

.com-footer li {
    display: inline;
    margin-left: 15px;
}

/* 登录页面 */
.index-login {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #000;
    opacity: 0.9;
    display: none;
}

.login {
    position: relative;
    width: 700px;
    height: 500px;
    margin: 210px 690px;
    border-radius: 20px;
    background-color: #242424;
}

/* 登录logo部分 */
.login-logo {
    position: absolute;
    top: -14px;
    right: 0;
    width: 120px;
    height: 120px;
    overflow: hidden;
}

.login-logomove {
    position: relative;
}

.login-logomove img:nth-of-type(1) {
    position: absolute;
    top: 0;
}

.login-logomove img:nth-of-type(2) {
    position: absolute;
    top: 120px;
}

/* 登录内容部分 */
.login-content {
    position: absolute;
    top: 90px;
    bottom: 60px;
    left: 160px;
    right: 160px;
    width: 355px;
    height: 350px;
}

.alogin {
    margin-left: 50px;
    margin-right: 50px;
    font-size: 28px;
    font-weight: 600;
}

.aregister {
    font-size: 28px;
    font-weight: 600;
    color: #808080;
}

.login-box {
    width: 400px;
    height: 330px;
    overflow: hidden;
}

.login_num {
    position: relative;
    width: 400px;
    height: 320px;
}

/* 登录账号内容 */
.login-input {
    position: absolute;
    left: 0;
    margin-top: 56px;
}

.login-input div {
    margin-bottom: 20px;
}

.login-input input {
    width: 300px;
    height: 50px;
    background-color: #242424;
    color: #fff;
    border: #fff 1px solid;
    border-radius: 10px;
    font-size: 20px;
}

.login-input .error1 {
    margin-bottom: 15px;
    height: 30px;
}

.submit1 {
    display: inline-block;
    width: 217px;
    height: 48px;
    margin-left: 75px;
    border: #fff 1px solid;
    border-radius: 20px;
    text-align: center;
    line-height: 48px;
}

/* 注册账号内容 */
.login-register {
    position: absolute;
    left: 400px;
    width: 400px;
    margin-top: 20px;
}

.login-register div {
    margin-bottom: 20px;
}

.login-register input {
    width: 300px;
    height: 50px;
    background-color: #242424;
    color: #fff;
    border: #fff 1px solid;
    border-radius: 10px;
    font-size: 20px;
}

#mynum2 {
    margin-left: 20px;
}

#mypassword21 {
    margin-left: 40px;
}

.login-register .error2 {
    margin-bottom: 15px;
    height: 30px;
}

/* 登录 */
.submit2 {
    display: inline-block;
    width: 217px;
    height: 48px;
    margin-left: 75px;
    border: #fff 1px solid;
    border-radius: 20px;
    text-align: center;
    line-height: 48px;
}

/* 返回顶部 */
.totop {
    display: block;
    position: fixed;
    right: 60px;
    bottom: 60px;
    z-index: 99;
    width: 70px;
    height: 70px;
}

.totop::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -25%) rotate(45deg);
    width: 12px;
    height: 12px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
}